<template>
	<view class="pages">
		<image :src="user.sysSetting.indexPic" mode="widthFix" style="width: 100%;"></image>
		<view class="body-box">
			<unicloud-db v-slot:default="{data, loading,pagination,hasMore,  error, options}" collection="uni-id-users" :field="field"
				:where="where" ref="udbRef" loadtime="manual" @load="load">
				<uni-list  v-if="data.length">
					<uni-list-item v-for="(item,index) in data" :key="index">
						<template v-slot:body>
							<view class="u-box" @click="navigator(item._id)">
								<image :src="item.avatar_file && item.avatar_file.url || logo" mode="aspectFill"
									class="u-img"></image>
								<view class="section">
									<view class="s-title">{{item.nickname}}</view>
									<view class="s-body">
										<view class="info">{{item.gender==1?"男":"女"}}</view>
										<view class="info" v-if="item.baseInfo&&item.baseInfo.inCome"> | ￥{{inCome[item.baseInfo.inCome].text}}</view>
										<view class="info" v-if="item.baseInfo&&item.baseInfo.height"> | {{item.baseInfo.height}}cm</view>
										<view class="info" v-if="item.baseInfo&&item.baseInfo.age"> | {{item.baseInfo.age}}岁</view>
									</view>
									<view class="s-des" v-if="item.baseInfo&&item.baseInfo.mydes">{{item.baseInfo.mydes}}</view>
								</view>
							</view>
						</template>
					</uni-list-item>
					<uni-load-state @networkResume="refresh" :state="{data,pagination,hasMore, loading, error}"
						@loadMore="loadMore">
					</uni-load-state>
				</uni-list>
				<view class="empty" v-else>
					<image src="../../static/network.png" mode="aspectFit" class="emptyImg"></image>
					<view class="emptyText" v-if="!noLoad">正在努力中...</view>
					<view class="emptyText" v-else>未匹配</view>
				</view>
			</unicloud-db>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		watch,
		computed,
		nextTick,
		onMounted
	} from 'vue'
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		useUserStore
	} from "@/pinia/user.js"
	
	
	import logo from "@/static/logo.png"
	
	
	let user = useUserStore()
	console.log("user++", user.userInfo)
	const field = ref('nickname,avatar_file,baseInfo,gender')
	let udbRef = ref(null)
	const inCome = computed(()=> {//收入
		return user.sysSetting.inCome.map((item, index) => ({
			value: index,
			text: item
		}))
	})
	/**
	 * 加载时机
	**/
	const noLoad = computed(()=>{
		return user.userInfo.baseInfo?.mar === null || user.userInfo.baseInfo?.mar==='' || user.userInfo.baseInfo?.mar===undefined
	})
	const loadData = ()=>{
		udbRef.value.loadData({
			clear: true
		})
	}
	onMounted(()=>{
		console.log("noLoad",noLoad.value);
		if(noLoad.value){
			return
		} 
		console.log("onMounted");
		loadData()
	})
	
	let where = computed(() => {
		let gender = 2
		if (user.userInfo.gender == 2) {
			gender = 1
		}
		let str = `gender == ${gender}  && baseInfo.mar !='' && baseInfo.mar !=null`
		console.log("seach",!!user.userInfo?.seachZstr)
		if(!!user.userInfo?.seachZstr){
			const queryRe = new RegExp(user.userInfo.seachZstr, 'i')
			str = queryRe + `.test('str') && ${str}`
		}
		console.log("str");
		return str
	})
	const load = (data) => {
		console.log("========>",data);
		if(data.length == 0){
			uni.showToast({
				title:'暂没有匹配到',
				icon:"none"
			})
		}else{
			uni.showModal({
				title:"恭喜",
				content:`恭喜您已匹配${data.length}个对象`,
				cancelText:"等待约见",
				confirmText:"主动约见",
				success: function (res) {
						if (res.confirm) {
							uni.switchTab({
								url:"/pages/grid/index"
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
			})
		}
		// console.log("data", data)
	}
	
	const navigator = (id)=>{
		// console.log("id===>>>",id);
		if(!id) return
		uni.navigateTo({
			url:`/pages/list/userInfo?id=${id}`
		})
	}
	
	
	const refresh=()=> {
			udbRef.value.loadData({
				clear: true
			}, () => {
				uni.stopPullDownRefresh()
				console.log('end');
			})
			console.log('refresh');
		}
	const loadMore=()=> {
			udbRef.value.loadMore()
		}
	onPullDownRefresh(()=> {
		console.log("onPullDownRefresh")
			refresh()
		})
	onReachBottom(()=> {
		if(noLoad.value) return
			loadMore()
		})
</script>

<style scoped lang="scss">
	/* #ifndef APP-NVUE */
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}

	/* #endif */
	.pages {
		background-color: #FFFFFF;
	}

	.body-box {
		margin-top: -20px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: #FFFFFF;
		padding: 5px;
		min-height: 500rpx;
	}

	.u-box {
		width: 100%;
		flex-direction: row;
	}

	.u-img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 20rpx;
	}

	.section {
		flex: 1;
		flex-direction: column;
		justify-content: space-between;
		padding: 10rpx;
	}
	.info{
		margin-left: 5px;
		display: inline;
	}
	.s-title, .s-body, .s-des {
		width: 500rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: 700;
		flex-direction: row;
		font-size: 14px;
		display: block;
	}
	.s-body, .s-des {
		font-size: 12px;
		font-weight: 500;
	}
	.s-des{
		color: #878787;
	}
	.empty{
		width: 100%;
		height: 600rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.emptyImg{
		width: 200rpx;
		height: 200rpx;
	}
	.emptyText{
		color: #ababab;
		font-size:12px;
		margin-top: 20px;
	}
</style>